<%--
  Created by IntelliJ IDEA.
  User: Acer
  Date: 2020/9/22
  Time: 20:54
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()  + path +"/";
%>
<html>
<head>
    <title>Title</title>

    <%-- 引入 jquery 文件   --%>
    <script src="<%=basePath%>/static/js/jquery.min.js"></script>
    <%-- 引入 echarts 文件  --%>
    <script src="<%=basePath%>/static/js/echarts.min.js"></script>
</head>
<body>

<%--定义 div 初始化折线图--%>
<div style="height: 410px;min-height: 100px;margin: 0 auto" id="main">


</div>
<script>

    // 加载 dom 之后初始化 Echarts 实例

    let myChart = echarts.init(document.getElementById("main"));

    option = {
        title: {
            text: '学生成绩分布',
            // subtext:    '纯属虚构'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['最高分', '最低分']
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                dataView: {readOnly: false},
                magicType: {type: ['line', 'bar']},
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,

            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} °C'
            }
        },
        series: [
            {
                name: '最高分',
                type: 'line',
                data: [11, 11, 15, 13, 12, 13, 10],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '最低分',
                type: 'line',
                data: [1, -2, 2, 5, 3, 2, 0],
                markPoint: {
                    data: [
                        {name: '周最低', value: -2, xAxis: 1, yAxis: -1.5}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'},
                        [{
                            symbol: 'none',
                            x: '90%',
                            yAxis: 'max'
                        }, {
                            symbol: 'circle',
                            label: {
                                position: 'start',
                                formatter: '最大值'
                            },
                            type: 'max',
                            name: '最高点'
                        }]
                    ]
                }
            }
        ]
    };

    // 在数据为动态加载之前建筑loading动画
    myChart.showLoading();

    // 对数据进行重写,变成动态数据

    let maxScores=[];
    let minScores=[];
    let sNames=[];

    $.ajax({
        type:"post",
        async:true,
        url:"<%=basePath%>getAllTwo.do",
        data:{},
        dataType:"json",
        // 回调函数
        success:function (result) {
            if(result != null && result.length > 0) {
                for(let i = 0; i <result.length; i ++) {
                    maxScores.push(result[i].maxscore);
                    minScores.push(result[i].minscore);
                    sNames.push(result[i].sname);
                }

                // 隐藏加载动画
                myChart.hideLoading();

                // 重新载入 Option
                myChart.setOption({
                    xAxis:{
                        data:sNames    // 重写 x 轴
                    },
                    series:[
                        {
                            name:'最高分',
                            data:maxScores
                        },
                        {
                            name:'最低分',
                            data:minScores
                        }
                    ]
                })
            }
        }
    })



    // 3、载入 Echarts 图标
    myChart.setOption(option);
</script>
</body>
</html>

